<template>
    <div>
        <el-breadcrumb separator="/" style="margin-bottom: 20px;">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card><el-button type="primary" @click="addDialog = true">添加用户</el-button></el-card>
        <el-card class="card">
            <el-table :data="rolelist" style="width: 100%" border stripe>
                <el-table-column type="expand">
                    <template slot-scope="{ row }">
                        <el-row class="row1" v-for="item in row.children" :key="item.id">
                            <el-col :span="5">
                                <el-tag closable @close="delTag(row, item.id)">{{ item.authName }} </el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <el-col :span="19">
                                <el-row class="row2" v-for="(item2, index) in item.children" :key="item2.id"
                                    :class="index != 0 ? 'bdtop' : ''">
                                    <el-col :span="6">
                                        <el-tag type="success" closable @close="delTag(row, item2.id)">{{ item2.authName
                                        }}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="18">
                                        <el-tag v-for="item3 in item2.children" closable @close="delTag(row, item3.id)"
                                            :key="item3.id" type="warning">{{ item3.authName
                                            }}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>

                <el-table-column label="角色名称" prop="roleName">
                </el-table-column>
                <el-table-column label="角色描述" prop="roleDesc">
                </el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope" v-if="scope.row.username !== 'admin'">
                        <el-button size="mini" type="primary" icon="el-icon-edit" @click="Edit(scope.row.id)">编辑
                        </el-button>
                        <el-popconfirm title="确认删除吗？" @confirm="del(scope.row.id)">
                            <el-button type="danger" icon="el-icon-delete" size="mini" slot="reference">删除</el-button>
                        </el-popconfirm>
                        <el-button size="mini" type="warning" icon="el-icon-setting" @click="SetRole(scope.row)">
                            分配权限
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!--  添加 -->
        <el-dialog title="添加角色" :visible.sync="addDialog" destroy-on-close @close="cancle">
            <el-form :model="addForm">
                <el-form-item label="添加角色" :label-width="Width">
                    <el-input v-model="addForm.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="Width">
                    <el-input v-model="addForm.roleDesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialog = false">取 消</el-button>
                <el-button type="primary" @click="addIt">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑的dialog -->
        <el-dialog title="修改用户" :visible.sync="editDialog">
            <el-form :model="editForm">
                <el-form-item label="角色名称" :label-width="Width">
                    <el-input v-model="editForm.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="Width">
                    <el-input v-model="editForm.roleDesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialog = false">取 消</el-button>
                <el-button type="primary" @click="editIt">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 分配权限的dialog -->
        <el-dialog title="分配权限" :visible.sync="setRoleDialog">
            <el-tree ref="treeRole" :data="treeRoleList" show-checkbox node-key="id" :props="defaultProps"
                default-expand-all :default-checked-keys="Checked"></el-tree>
            <div slot="footer" :class="'dialog-footer'">
                <el-button @click="setRoleDialog = false">取 消</el-button>
                <el-button type="primary" @click="setRoleIt">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            rolelist: [],
            addDialog: false,
            editDialog: false,
            setRoleDialog: false,
            addForm: {
                roleName: '',
                roleDesc: ''
            },
            Width: '100px',
            editForm: {
                id: '',
                roleName: '',
                roleDesc: ''
            },
            treeRoleList: [],
            defaultProps: {
                children: 'children',
                label: 'authName'
            },
            id: '',
            Checked: [],
        }
    },
    methods: {
        // 获取当前id的数据
        async Edit(id) {
            this.editDialog = true;
            const { data: { data, meta } } = await this.$http.get(`roles/${id}`);
            if (meta.status == 200) {
                this.editForm.id = id;
                this.editForm.roleName = data.roleName;
                this.editForm.roleDesc = data.roleDesc;
            }
        },
        async editIt() {
            const { data: { data, meta } } = await this.$http.put(`roles/${this.editForm.id}`, this.editForm);
            if (meta.status !== 200) return this.$message.error('修改失败,请稍后尝试');
            this.$message.success('修改成功');
            this.getRoleList();
            this.editDialog = false;
        },
        async getRoleList() {
            const { data: { data, meta } } = await this.$http.get('roles');
            if (meta.status !== 200) return this.$message.error('获取权限数据失败，请重新获取');
            this.rolelist = data;
        },
        async addIt() {
            const { data: { meta } } = await this.$http.post('roles', this.addForm);
            if (meta.status == 201) this.$message.success('添加成功');
            this.addDialog = false;
            this.getRoleList();
        },
        // 分配权限
        async setRoleIt() {
            this.Checked = [...this.$refs.treeRole.getHalfCheckedKeys(), ...this.$refs.treeRole.getCheckedKeys()].join(',');
            const { data: { meta } } = await this.$http.post(`roles/${this.id}/rights`, { rids: this.Checked });
            if (meta.status !== 200) return this.$message.error('更新权限失败');
            this.$message.success('更新成功');
            this.Checked = [];
            this.getRoleList();
            this.setRoleDialog = false;
        },
        cancle() {
            this.addForm.roleName = '';
            this.addForm.roleDesc = '';
        },
        // 分配权限按钮
        async SetRole(row) {
            this.Checked = [];
            this.setRoleDialog = true;
            this.id = row.id;
            this.getTreeNids(row, this.Checked);
            const { data: { data, meta } } = await this.$http.get('rights/tree');
            if (meta.status !== 200) return this.$message.error('获取权限数据失败，请重新获取');
            this.treeRoleList = data;
        },
        getTreeNids(treeData, arr) {
            if (!treeData.children) return arr.push(treeData.id);
            treeData.children.forEach((child) => {
                this.getTreeNids(child, arr);
            })
        },
        // 删除指定权限
        delTag(row, id) {
            this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { data: { data, meta } } = await this.$http.delete(`roles/${row.id}/rights/${id}`);
                if (meta.status !== 200) return this.$message.error('删除权限失败')
                this.$message.success('删除权限成功')
                row.children = data;
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        async del(id) {
            const { data: { meta } } = await this.$http.delete(`roles/${id}`);
            if (meta.status == 200) this.$message.success('删除成功');
            this.getRoleList();
        }
    },
    created() {
        this.getRoleList();
    }
}
</script>
<style lang="less" scoped>
/deep/.el-card,
.card {
    margin-bottom: 20px !important;
}

.el-button {
    margin: 0 5px 0 0;
}

/deep/.row1 {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 5px 0;
    box-sizing: border-box;
}

/deep/.row2 {
    padding: 10px 0;
}

.tag {
    margin: 5px;
}

/deep/.el-tag {
    margin-left: 10px !important;
}

.bdtop {
    border-top: 1px solid #eee;
}
</style>